<template>
	<view class="wrapper">
		<u-navbar
      title=""
      :autoBack="false"
      bgColor="#F6F6F6"
      titleStyle="font-weight: 500; color: #000000;"
      :placeholder="true"
    >
			<view slot="left" class="cancel" @click="leftClick(urlIndex)">{{
        $t("cancel")
      }}</view>
      <view slot="right" class="done" :class="{'not-done': !commentName && !commentLast}" @click="handleSubmit">{{
        $t("index.Done")
      }}</view>
    </u-navbar>
		<view class="pic-select-box">
			<image :src="avatar" alt="" class="pic" mode="aspectFill" v-if="isPeopleAvatarExit(avatar)"></image>
			<view v-else class="pic avator-font-setting" :style="{ background: `${defaultColor}`, fontSize: '64upx' }">{{ defaultName }}</view>
			<!-- <image :src="$store.state.normalPic" alt="" class="pic" mode="aspectFill" v-if="!avatar || !isPeopleAvatarExit(avatar)"></image>
			<image :src="avatar" alt="" class="pic" mode="aspectFill" v-else></image> -->
		</view>
		<!-- <view class="upload-text" @click="handleUploadImage">{{ $t("chat.SetNewPhoto") }}</view> -->
		<view class="name-input">
			<input class="group-name" v-model="commentName" :placeholder="$t('user.First-Name')" placeholder-class="placeholderStyle" maxlength="64">
			<input class="group-name" v-model="commentLast" :placeholder="$t('user.Last-Namek')" placeholder-class="placeholderStyle" maxlength="64">
		</view>
	</view>
	<!-- <view class="wrapper">
		<view class="info-box">
      <view class="name-box">
        <label class="name-box-title">{{ $t('user.First-Name') }}</label>
        <input :placeholder="$t('user.commentName')" v-model="commentName" class="input" />
      </view>
      <view class="name-box">
        <label class="name-box-title">{{ $t('user.Last-Namek') }}</label>
        <input :placeholder="$t('user.commentLast')" v-model="commentLast" class="input" />
      </view>      
			<u-button :text="$t('index.Submit')" class="btn" @click="handleSubmit"></u-button>
		</view>
	</view> -->
</template>

<script>
import { updateFriendRemarks } from '@/services/friends'
import { getTargetUserInfo,updateOlUsersName } from '@/utils/index'
	export default {
		data() {
			return {
				defaultColor: '',
				defaultName: '',
				avatar: '',
        commentName: '',
        commentLast: '',
				userId: '',
				friendId: '',
				urlIndex: 'ModifyRemarks'
			};
		},
		methods: {
			async handleSubmit () {
				uni.showLoading()
				const resp = await updateFriendRemarks({
					friendId: this.friendId ,
          commentName: this.commentName,
          commentLast: this.commentLast
				})
				if (!resp.success) return
				uni.hideLoading()
				getTargetUserInfo(this.userId)
				updateOlUsersName({
					friendId: this.friendId,
					commentName: this.commentName,
						commentLast: this.commentLast
					})
				if(this.$store.state.chatList) {
					let editChat = this.$store.state.chatList.find((t)=>{
						return t.targetId == this.friendId && t.conversationType == 1
					})
					if(editChat) {
						editChat.info.commentLast = this.commentLast
						editChat.info.commentName = this.commentName
					}
				}
				
				this.leftClick(this.urlIndex)
				// setTimeout(() => {
				// 	uni.switchTab({
				// 		url: '/pages/friends/Friends'
				// 	});
				// }, 500)
			}
		},
		onLoad(option){
			this.friendId = option.friendId;
      this.userId = option.userId
      console.log(option)
      this.commentName = option.commentName
      this.commentLast = option.commentLast
      this.defaultColor = option.defaultColor
      this.defaultName = option.defaultName
      this.avatar = option.avatar
			this.getPrePages(this.urlIndex) // 获取上一个页面的路径已经参数
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10upx 30upx 30upx;
		box-sizing: border-box;
		.cancel {
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #61BDB2;
		}
		.done {
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #61BDB2;
		}
		.not-done {
			font-size: 28rpx;
			font-weight: bold;
			color: #000000;
			opacity: 0.3;
			pointer-events: none;
		}
		.pic-select-box {
      width: 200upx;
			height: 200upx;
			background: #E5EEED;
			border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon-zhaoxiangji {
        font-size: 66upx;
        color: #61BDB2;
      }
      .pic {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
		.upload-text {
			font-size: 30upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #61BDB2;
			margin-top: 24upx;
		}
		.name-input {
			width: 100%;
			background: #FFFFFF;
			border-radius: 20upx;
			margin-top: 70upx;
			padding: 0upx 30upx;
			box-sizing: border-box;
			.group-name {
				width: 100%;
				height: 112upx;
				font-size: 30upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #000000;
				border-top: 2upx solid #F6F6F6;
				&:nth-child(1) {
					border: unset;
				}
			}
			.placeholderStyle {
				font-size: 30upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #878787;
			}
		}
	}
</style>
